import React from 'react';
import Ajax from 'lib/Ajax';
import { Toast, ListView } from 'antd-mobile'
import { Link } from 'react-router'

export default class ListData extends React.Component {
  constructor(props) {
    super(props);
    this.genData = (pIndex = 1, list) => {
      const dataBlob = {};
      const index = pIndex - 1;
      for (let i = 0; i < 10; i++) {
        const ii = (index * 10) + i;
        if(list[i]){
          dataBlob[`${ii}`] = list[i];
        }
      }
      return dataBlob;
    };

    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    this.state = {
      dataSource: dataSource.cloneWithRows({}),
      pageCount: 2,
      isLoading: false,
      totalCount: 0
    }
    this.currentPage = 1;
    this.searchOption = {};
    this.rData = {};
  }

  componentDidMount(){
    this.fetchList(1);
  }

  fetchList = (currentPage) => {
    const self = this;
    const { pageCount, isLoading } = self.state;
    if(isLoading || currentPage > pageCount){
      return
    }
    self.setState({
      isLoading: true
    });
    Ajax({
      url: this.listApi,
      data: Object.assign({
        currentPage,
        pageSize: 10
      }, self.searchOption),
      success: function(result){
        if(currentPage == 1){
          self.rData = { ...self.genData(currentPage, result.list) };
        }else{
          self.rData = { ...self.rData, ...self.genData(currentPage, result.list) };
        }
        self.setState({
          dataSource: self.state.dataSource.cloneWithRows(self.rData)
        });
        self.currentPage = result.currentPage;
        self.setState({
          pageCount: result.pageCount,
          isLoading: false,
          totalCount: result.totalCount
        });
      },
      error: function(error){
        Toast.info(error||'请求失败');
        self.setState({
          isLoading: false
        });
      }
    });
  }

  doSearch = (obj) => {
    Object.assign(this.searchOption, obj);
    this.currentPage = 1;
    this.setState({
      // dataSource: this.state.dataSource.cloneWithRows({}),
      pageCount: 2
    }, ()=>{
      this.fetchList(1);
    })
  }

  onEndReached = ()=>{
    this.fetchList(++this.currentPage);
  }

  renderFooter = () => {
    const { currentPage } = this;
    const { pageCount, isLoading } = this.state;
    if(pageCount == 0){
      return <div style={{ textAlign: 'center' }}>无数据</div>
    }else if(pageCount <= currentPage){
      return <div style={{ textAlign: 'center' }}>已全部加载</div>
    }else{
      return <div style={{ textAlign: 'center' }}>
        {isLoading ? 'Loading...' : 'Loaded'}
      </div>
    }
  }

  renderRow = (rowData, sectionID, rowID)=>{
    const { imgBaseUrl, commonData } = this.props.appStore;
    return (
        <div key={rowID} className="activity-item">
          <Link to={`/activity/${rowData.activityId}`}>
            <img src={`${imgBaseUrl}${rowData.listImg}`} alt=""/>
            <div className="row-text">
              <div className="t">{rowData.title}</div>
              <div className="b">
                {rowData.createTime}
                <span className="fr">阅读量{rowData.readCount}</span>
              </div>
            </div>
          </Link>
        </div>
      );
  }
}
